<template>
  <div class="footer">
    <!-- 推荐的底部 -->
    <!-- 默认显示 -->
    <div class="recommend com">
      <router-link to="/rec/main" tag="li" class="nav" active-class="active">
        <span class="iconfont font">&#xe606;</span>
        <span class="fontS font">首页</span>
      </router-link>

      <router-link to="/rec/topic" tag="li" class="nav" active-class="active">
        <span class="iconfont font">&#xe657;</span>
        <span class="fontS font">话题</span>
      </router-link>

      <router-link to="/rec/goods" tag="li" class="nav" active-class="active">
        <span class="iconfont font">&#xe899;</span>
        <span class="fontS font">购物车</span>
      </router-link>

      <router-link to="/rec/mine" tag="li" class="nav" active-class="active">
        <span class="iconfont font">&#xe604; </span>
        <span class="fontS font">我的</span>
      </router-link>
    </div>

    
  </div>
</template>

<script>


export default {
  props: {},
  data() {
    return {

    };
  },
  
  mounted() {},
};
</script>

<style scoped>
.footer {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 0.8rem;
  background: rgb(255, 255, 255);
  position: fixed;
  left: 0rem;
  bottom: 0rem;
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  font-size: 0.25rem;
  color: #b2b2b2;
}
.com {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.font {
  font-size: 0.35rem;
}
.fontS {
  font-size: 0.22rem;
}
.active {
  color: #fb3a12;
}
</style>